<template>
  <view class="page">
    <view class="search-bar">
      <input class="search" type="text" v-model="kw" placeholder="搜索姓名/编号" @input="doSearch" />
      <button class="btn-outline" @tap="clear">清空</button>
    </view>

    <view class="tabs">
      <view class="tab" :class="{ active: tab==='all' }" @tap="tab='all'">全部</view>
      <view class="tab" :class="{ active: tab==='in' }" @tap="tab='in'">在院</view>
      <view class="tab" :class="{ active: tab==='out' }" @tap="tab='out'">已出院</view>
    </view>

    <view class="list">
      <view class="item" v-for="p in filtered" :key="p.id" @longpress="more(p)">
        <view class="left">
          <view class="avatar">{{ p.name.slice(0,1) }}</view>
          <view>
            <text class="name">{{ p.name }}</text>
            <text class="sub">{{ p.gender }} · {{ p.age }}岁 · {{ p.no }}</text>
            <text class="sub">{{ p.status }} · {{ p.dx }}</text>
          </view>
        </view>
        <view class="ops">
          <button class="btn-outline" @tap.stop="gotoCase(p)">病历</button>
          <button class="btn-primary" @tap.stop="contact(p)">联系</button>
        </view>
      </view>
    </view>

    <view class="toast" v-if="toast">{{ toast }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      kw: '',
      tab: 'all',
      toast: '',
      list: [
        { id: 1, name: '王小明', gender: '男', age: 32, no: 'M008132', status: '在院', dx: '上呼吸道感染' },
        { id: 2, name: '李红', gender: '女', age: 27, no: 'M003421', status: '在院', dx: '支气管炎' },
        { id: 3, name: '赵云', gender: '男', age: 53, no: 'M002210', status: '已出院', dx: '胃炎' }
      ]
    }
  },
  computed: {
    filtered() {
      const k = this.kw.trim()
      return this.list.filter(p => {
        const byTab = this.tab === 'all' || (this.tab === 'in' && p.status === '在院') || (this.tab === 'out' && p.status === '已出院')
        const byKw = !k || p.name.includes(k) || p.no.includes(k)
        return byTab && byKw
      })
    }
  },
  methods: {
    doSearch() {},
    clear() { this.kw = '' },
    gotoCase(p) { uni.navigateTo({ url: '/pages/medical/index' }) },
    contact(p) { this.showToast(`已向 ${p.name} 发送通知`) },
    more(p) { this.showToast(`长按更多：${p.name}`) },
    showToast(msg) { this.toast = msg; setTimeout(() => this.toast = '', 1500) }
  }
}
</script>

<style>
.page { padding: 12px; background: linear-gradient(180deg, #eef3fb, #f8fafc); min-height: 100vh }
.search-bar { display:flex; gap: 12rpx; margin-bottom: 12rpx }
.search { flex:1; height: 70rpx; border-radius: 16rpx; border: 2rpx solid #e6e8ee; background:#fff; padding: 0 20rpx }
.btn-primary { padding: 12rpx 20rpx; border-radius: 14rpx; background: linear-gradient(180deg, #2a7de1, #1f63b5); color: #fff; font-weight: 600; box-shadow: 0 12rpx 28rpx rgba(42, 125, 225, 0.28) }
.btn-outline { padding: 12rpx 20rpx; border-radius: 14rpx; background: #fff; border: 2rpx solid #e6e8ee; color: #1a1f36; font-weight: 600 }
.tabs { display:flex; gap: 12rpx; margin-bottom: 10rpx }
.tab { padding: 10rpx 18rpx; border-radius: 16rpx; background: #f1f5f9; font-size: 22rpx; font-weight: 600; color: #334155 }
.tab.active { background: rgba(42,125,225,0.12); color: #2a7de1 }
.list { display:grid; gap: 12rpx }
.item { display:grid; grid-template-columns: 1fr auto; gap: 12rpx; align-items:center; padding: 16rpx; border: 2rpx solid #e6e8ee; border-radius: 18rpx; background:#fff }
.left { display:flex; gap: 12rpx; align-items:center }
.avatar { width: 84rpx; height: 84rpx; border-radius: 9999rpx; background: linear-gradient(135deg, #cfe4ff, #a6c8ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1c3f7b }
.name { font-weight:700; font-size: 28rpx; display:block }
.sub { color:#667085; font-size:22rpx; display:block; margin-top: 4rpx }
.ops { display:flex; gap: 10rpx }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 120rpx; background: rgba(17,24,39,.9); color:#fff; padding: 10rpx 16rpx; border-radius: 12rpx; font-size: 24rpx }
</style>


